<template>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4>文章分类</h4>
        </div>
        <div class="panel-body">
            <ul>
                <li class="type" v-for="(type,index) in types"><a href="">{{type.fname}}</a></li>
            </ul>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                types: ''
            }
        },
        methods: {
            getType() {
                var _this = this
                $.ajax({
                    type: 'POST',
                    url: 'http://127.0.0.1:5000/api/article/type',
                    crossDomain: true,
                    async: true,
                    dataType: 'json',
                    success: function(res) {
                        _this.types = res.Table2
                    },
                    error: function(res) {
                        console.log(res)
                    }
                })
            }
        },
        mounted: function() {
            this.getType()
        }
    }
</script>
<style>
    .type {
        width: 40%;
        display: block;
        /*background-color: #e2b435;*/
        padding: 10px;
        text-align: left;
    }
</style>